<template>
  <div>
    <div class="tag-box">
      <div class="tag-item-text">Presets:</div>
      <div class="tag-item">
        <CloudTag color="pink">pink</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="red">red</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="orange">orange</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="green">green</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="cyan">cyan</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="blue">blue</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="purple">purple</CloudTag>
      </div>
    </div>
    <div class="tag-box" style="margin-top: 20px">
      <div class="tag-item-text">Custom:</div>
      <div class="tag-item">
        <CloudTag color="#f50">#f50</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="#2db7f5">#2db7f5</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="#87d068">#87d068</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="#108ee9">#108ee9</CloudTag>
      </div>
    </div>
    <div class="tag-box" style="margin-top: 20px">
      <div class="tag-item-text">方形tag:</div>
      <div class="tag-item">
        <CloudTag color="#FF6701" :isSquareTag="true">新</CloudTag>
      </div>
      <div class="tag-item">
        <CloudTag color="#FF5E5E" :isSquareTag="true">荐</CloudTag>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  title: '2.多彩标签',
  subTitle: '例如给最后一项我们添加了多种预设色彩的标签样式，用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。加上邮编链接。设置isSquareTag=true为方形标签',
  data() {
    return {
    }
  },
  methods: {
  }
}
</script>

<style lang="scss">
.tag-box {
  display: flex;
}
.tag-item {
  padding-right: 10px;
}
.tag-item-text {
  width: 70px;
  text-align: right;
  margin-right: 10px;
}
</style>